<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>HELLO WORLD</title>
    <script type="text/javascript" src="./js/map/tdt-v4.0/api.js"></script>
    <!-- <script type="text/javascript" src="./js/map/tdt-v4.0/military.js"></script> -->
    <!-- <script type="text/javascript" src="./js/map/tdt-v4.0/service.js"></script> -->
    <!-- <link rel="stylesheet" type="text/css" href="./js/map/tdt-v4.0/tianditu4.0.css"/> -->

    <script>
        var map;
        var zoom = 8;
        var mapCenterPoint=[111.29316, 30.70428]  // 宜昌东站

        var data_info = [
            [111.166530,30.759360,"地址：xxx市xxx城区xxx大街xxx号乐天银泰百货八层"],
            [111.167530,30.759360, "地址：xxx市xxx城区xxx大街"],
            [111.164530,30.759360, "地址：xxx市xxx城区xxx路xxx号"],
        ];
        
        function onLoad() {
            //初始化地图对象
            map = new T.Map("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new T.LngLat(mapCenterPoint[0], mapCenterPoint[1]), zoom);

            for (var i = 0; i < data_info.length; i++) {
                var marker = new T.Marker(new T.LngLat(data_info[i][0], data_info[i][1])); // 创建标注
                var content = data_info[i][2];
                map.addOverLay(marker); // 将标注添加到地图中
                addClickHandler(content, marker);
            }

            // 调用函数开启标记工具
            openMarkerTool();
        }

        
        //=============================================================
        //            在地图上初始化坐标点方法
        //=============================================================

        function addClickHandler(content, marker) {
            marker.addEventListener("click", function (e) {
                openInfo(content, e);
            });
        }
        function openInfo(content, e) {
            var point = e.lnglat;
            marker = new T.Marker(point); // 创建标注
            var markerInfoWin = new T.InfoWindow(content, {
                offset: new T.Point(0, -30),
            }); // 创建信息窗口对象
            map.openInfoWindow(markerInfoWin, point); //开启信息窗口
        }

        

        //=============================================================
        //            在地图上标记 并显示坐标值
        //=============================================================
        // 创建标记工具
        function openMarkerTool() {
            // if (handler) handler.close();
            handler = new T.MarkTool(map, {
                follow: true,
                icon: new T.Icon({
                    iconUrl: './image/marker-icon-2x.png', // 标记图标的URL
                    iconSize: new T.Point(24, 28), // 图标可视区域的大小
                }),
            });
            handler.open();
            handler.addEventListener('mouseup', function (e) {
                // 这里可以获取到当前点位的坐标
                var point = [e.currentLnglat.lng, e.currentLnglat.lat];
                // 画完之后重新绘制，不然编辑不了
                showPoint(point);
                handler.clear();
            })
        }

        // 显示点
        function showPoint(point) {
            let marker = new T.Marker(new T.LngLat(point[0], point[1]));
            let content = "添加的点: ["+point[0]+", "+point[1]+"]";
            map.addOverLay(marker);
            addClickHandler(content, marker);
        }
       
        
    </script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:100%; height:100%"></div>
</body>
</html>